<template>
  <div>
    <div v-show="guestFlag != '1'" class="blank">
      无随行嘉宾
    </div>
  <div v-show="guestFlag == '1'" class="">
    <div class="group-title">
      <div class="text">随行嘉宾基础信息</div>
      <img
          src="https://intelaulinpro.oss-cn-beijing.aliyuncs.com/common/icon-edit.png"
          alt=""
          @click="handleEditIconClick(1)"
      >
    </div>
    <div class="user-info-box" style="margin-top: 40px;">
      <div class="left">
        <UserInfoItem
            :itemKey="$t('userForm.salutation')"
            :itemValue="user.salution"
        />
        <UserInfoItem
            :itemKey="$t('userForm.lastName')"
            :itemValue="user.lastName"
        />
        <UserInfoItem
            :itemKey="$t('userForm.firstName')"
            :itemValue="user.firstName"
        />
        <UserInfoItem
            itemKey="身份证号*"
            :itemValue="user.birthdate"
        />

      </div>
      <div class="right">
        <UserInfoItem
            :itemKey="$t('userForm.businessEmailAddress')"
            :itemValue="user.emailAddress"
        />
        <UserInfoItem
            :itemKey="$t('userForm.preferredBadgeFirstName')"
            :itemValue="user.preferredBadgeLastName"
        />
        <UserInfoItem
          :itemKey="$t('userForm.preferredBadgeFirstName')"
          :itemValue="user.preferredBadgeFirstName"
        />
        <UserInfoItem
            itemKey="外套尺寸"
            :itemValue="user.coatSize === '外套尺寸*' ? '' : user.coatSize"
        />
      </div>
    </div>
    <div class="group-title" style="margin-top: 34px;">
      <div class="text">随行嘉宾紧急情况和医疗信息</div>
      <img
          src="https://intelaulinpro.oss-cn-beijing.aliyuncs.com/common/icon-edit.png"
          alt=""
          @click="handleEditIconClick(2)"
      >
    </div>
    <div>
      <UserInfoItem
          :itemKey="$t('userForm.emergencyContactLastName')"
          :itemValue="user.emergencyContactLastName"
      />
      <UserInfoItem
          :itemKey="$t('userForm.emergencyContactFirstName')"
          :itemValue="user.emergencyContactFirstName"
      />
      <UserInfoItem
          :itemKey="$t('userForm.emergencyContactPhoneNumber')"
          :itemValue="user.emergencyContactPhoneNumber"
      />
      <UserInfoItem
          :itemKey="$t('userForm.emergencyContactAlternatePhoneNumber')"
          :itemValue="user.emergencyContactAlternatePhoneNumber"
      />
      <UserInfoItem
          :itemKey="$t('userForm.relationToInvitee')"
          :itemValue="user.relationToCompanion"
      />
      <UserInfoItem
          :itemKey="$t('userForm.allergiesOrOtherMedicalRestrictions')"
          :itemValue="user.allergiesMedicalRestrictionsItem"
          :itemValue2="user.allergiesMedicalRestrictionsDetails"
      />
      <UserInfoItem
          :itemKey="$t('userForm.doYouHaveAnyDietaryRestrictions')"
          :itemValue="user.dietaryRestrictionsItem"
          :itemValue2="user.dietaryRestrictionsDetails"
      />
    </div>

  </div>
  </div>
</template>

<script>
import Subtitle from "../../components/common/Subtitle";
import UserInfoItem from "../../components/UserInfoItem";
import {getGuest, getGuestAuto, getUserInfo} from "@/api/service";

export default {
  name: "faq",
  components: {UserInfoItem, Subtitle},
  data() {
    return {
      user: {},
      guestFlag: '0'
    }
  },
  watch: {
    '$route': {
      handler: function (to, from) {
        this.uploadPage()
      },
      immediate:true
    }
  },
  mounted() {
    getGuestAuto()
    this.guestFlag = JSON.parse(localStorage.overnight_userInfo).guestFlag
    this.user = JSON.parse(localStorage.accompany)
  },
  created() {
    getGuestAuto()
  },
  methods: {
    uploadPage () {
      getGuest().then(res => {
        if (res.code === 200) {
          this.user = res.data
        }
      })
    },
    handleEditIconClick(val) {
      console.log(val)
      if (val === 1) {
        this.$router.push({
          path: this.$i18n.path('accompanyInfoEdit')
        })
      }
      if (val === 2) {
        this.$router.push({
          path: this.$i18n.path('accompanyInviteeInfoEdit')
        })
      }
    }
  },

}
</script>

<style scoped>
.register-container {
  width: 800px;
  padding-bottom: 120px;
}

.group-title {
  height: 36px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #333333;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #D7D7D7;
}
.group-title > img {
  cursor: pointer;
}

.user-base-item {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  padding: 16px 20px 0 0;
  display: flex;
  flex-direction: column;
}

.user-base-item > .name {
  font-size: 16px;
  line-height: 22px;
  color: #333333;
}


.user-base-item > .phone-number {
  font-weight: 200;
  font-size: 16px;
  line-height: 22px;
  color: #666666;
}

.user-info-box {
  width: 100%;
  display: flex;
}

.user-info-box > .left {
  width: 50%;
  border-right: 1px solid #D7D7D7;
}

.user-info-box > .right {
  width: 50%;
  padding-left: 40px;
  box-sizing: border-box;
}

.block-title {
  font-size: 16px;
  color: #333333;
  margin-top: 40px;
}
.blank {
  width: 800px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #888888;
}
</style>
